<template>
	<view class="share" @touchmove.stop.prevent="moveHandle">
		<view :class="{'box': isShow}" @click="closePopUp"></view>
		<view class="pop-upWindow" :class="{'show': isShow}">
			<view class="popoverHead">
				<view class="popoverHead-title">计划录入</view>
				<view class="popoverHead-icon" v-if="popUpType=='view' || isRedact">
					<image src="@/static/image/target/trash_icon.png" @click="deletePlan"></image>
					<image v-if="!isRedact" src="@/static/image/user/edit_icon.png" @click="redactPlan"></image>
					<text v-else @click="cancelRedact">取消</text>
				</view>
			</view>
			<scroll-view scroll-y style="height: 90%;">
			<view class="content">
				<view class="content-inputInfo">
					<view class="content-inputInfo-top">
						<view class="content-inputInfo-top-item">
							<view>已发货数量：</view>
							<view><input :class="popUpType=='view'?'forbidden':''" v-model="form.auantityShipped" :disabled="popUpType=='view'?true:false" type="number" placeholder="请输入数量" /></view>
						</view>
						<view class="content-inputInfo-top-item">
							<view>成品库存数：</view>
							<view><input :class="popUpType=='view'?'forbidden':''" v-model="form.finishedGoodsInventory" :disabled="popUpType=='view'?true:false" type="number" placeholder="请输入数量" /></view>
						</view>
					</view>
					<view class="content-inputInfo-bottom">
						<view class="content-inputInfo-top-item">
							<view>半成品库存数：</view>
							<view><input :class="popUpType=='view'?'forbidden':''" v-model="form.inventoryOfHalfProducts" :disabled="popUpType=='view'?true:false" type="number" placeholder="请输入数量" /></view>
						</view>
						<view class="content-inputInfo-top-item">
							<view>原材料库存数：</view>
							<view><input :class="popUpType=='view'?'forbidden':''" v-model="form.rawMaterialInventory" :disabled="popUpType=='view'?true:false" type="number" placeholder="请输入数量" /></view>
						</view>
					</view>
				</view>
				<view class="content-shipmentsPlan">
					<view class="content-shipmentsPlan-title">
							发货计划
					</view>
					<view class="content-shipmentsPlan-timeNum" v-for="item,index in shipments" :key="item.id">
						<picker class="content-shipmentsPlan-timeNum-time" :class="popUpType=='view'?'forbidden':''" :disabled="popUpType=='view'?true:false" mode="date" :value="date" @change="timeBtn($event,item)">
							<text v-if="item.date" style="color: #242424;">{{item.date}}</text>
							<text v-else>请选择日期</text>
							<image v-if="!item.date" src="@/static/image/push_icon.png"></image>
						</picker>
						<view class="content-shipmentsPlan-timeNum-num">
							<input :class="popUpType=='view'?'forbidden':''" v-model="item.quantity" :disabled="popUpType=='view'?true:false" type="number" placeholder="数量" />
							<image src="@/static/image/close_blue_icon.png" @click="deleteClick('shipments',index)"></image>
						</view>
					</view>
					<view class="content-shipmentsPlan-add">
						<view class="content-shipmentsPlan-add-title" v-if="popUpType!=='view'" @click="additionClick('shipments')">+添加</view>
						<view v-if="shipments.length>0">数量合计： <text style="color: red;">0</text></view>
					</view>
				</view>
				
				
				<view class="content-shipmentsPlan">
					<view class="content-shipmentsPlan-title">
							生产计划
					</view>
					<view class="content-shipmentsPlan-timeNum" v-for="item,index in production" :key="item.id">
						<picker class="content-shipmentsPlan-timeNum-time" :class="popUpType=='view'?'forbidden':''" :disabled="popUpType=='view'?true:false" mode="date" :value="date" @change="timeBtn($event,item)">
							<text v-if="item.date" style="color: #242424;">{{item.date}}</text>
							<text v-else>请选择日期</text>
							<image v-if="!item.date" src="@/static/image/push_icon.png"></image>
						</picker>
						<view class="content-shipmentsPlan-timeNum-num">
							<input :class="popUpType=='view'?'forbidden':''" v-model="item.quantity" :disabled="popUpType=='view'?true:false" type="number" placeholder="数量" />
							<image src="@/static/image/close_blue_icon.png" @click="deleteClick('production',index)"></image>
						</view>
					</view>
					<view class="content-shipmentsPlan-add">
						<view class="content-shipmentsPlan-add-title" v-if="popUpType!=='view'" @click="additionClick('production')">+添加</view>
						<view v-if="production.length>0">数量合计： <text style="color: red;">0</text></view>
					</view>
				</view>
			
			
				<view class="content-shipmentsPlan">
					<view class="content-shipmentsPlan-title">
						关键工序生产计划：
					</view>
					<view class="content-shipmentsPlan-timeNum" v-for="item,index in process" :key="item.id">
						<picker class="content-shipmentsPlan-timeNum-time" :class="popUpType=='view'?'forbidden':''" :disabled="popUpType=='view'?true:false" mode="date" :value="date" @change="timeBtn($event,item)">
							<text v-if="item.date" style="color: #242424;">{{item.date}}</text>
							<text v-else>请选择日期</text>
							<image v-if="!item.date" src="@/static/image/push_icon.png"></image>
						</picker>
						<view class="content-shipmentsPlan-timeNum-num">
							<input :class="popUpType=='view'?'forbidden':''" v-model="item.quantity" :disabled="popUpType=='view'?true:false" type="number" placeholder="数量" />
							<image src="@/static/image/close_blue_icon.png" @click="deleteClick('process',index)"></image>
						</view>
					</view>
					<view class="content-shipmentsPlan-add">
						<view class="content-shipmentsPlan-add-title" v-if="popUpType!=='view'"  @click="additionClick('process')">+添加</view>
						<view v-if="process.length>0">数量合计： <text style="color: red;">0</text></view>
					</view>
				</view>
				
				
				<view class="content-Btn">
					<view class="content-Btn-confirm" :class="popUpType=='view'?'forbidden':''" @click="confirmPlan">保存</view>
					<view class="content-Btn-cancel" @click="closePopUp">取消</view>
				</view>
			</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import * as api from '@/utils/api.js';
	
	export default {
		props:{
			isShow:{
				type:Boolean,
				default:false
			},
			popUpType:{
				type:String,
				default:null,
			},
			salesData: {
				type:Object,
				default:{},
			},
			materialData:{
				type:Object,
				default:{},
			}
		},
		data(){
			return {
				time:'',
				shipments:[],
				production:[],
				process:[],
				isRedact:false,
				form:{
					id:"",
					purchaseId:"",
					materialId:"",
					
					auantityShipped:null, // 已发货数量
					finishedGoodsInventory:null, // 成品库存数
					inventoryOfHalfProducts:null, // 半成品库存数
					rawMaterialInventory:null, // 原材料库存数
					
					shippingSchedule:"", // 发货计划
					productionPlan:"", // 生产计划
					keyProcessProductionPlan:"" // 关键工序生产计划
				}
			}
		},
		watch:{
			popUpType:{
				deep: true,
				handler(val) {
					if(val == 'view'){
						this.viewPlan()
					}
				}
			}
		},
		methods:{
			moveHandle(){
				return;
			},
			viewPlan(){
				let id = this.salesData.purchaseId + this.materialData.materialId
				api.shoppingListLook(id).then(res=>{
					if(res.code == 0){
						if(res.data.result){
							this.form = res.data.result
							let { shippingSchedule,productionPlan,keyProcessProductionPlan } = res.data.result
							if(shippingSchedule){
								this.convertToPlan('shipments',shippingSchedule)
							}
							if(productionPlan){
								this.convertToPlan('production',productionPlan)
							}
							if(keyProcessProductionPlan){
								this.convertToPlan('process',keyProcessProductionPlan)
							}							
						}
					}
				})
			},
			closePopUp(){
				this.$emit('closePopUp')
				if(this.isRedact){
					this.isRedact = false
				}
			},
			anewRequest(){
				this.$emit('anewRequest')
			},
			timeBtn(e,item){
				item.date = e.detail.value
			},
			additionClick(type){
				let obj = {
					id:Math.round(Math.random()*10000),
					date:"",
					quantity:null
				}
				if(type == 'shipments'){
					this.shipments.push(obj)
				}else if(type == 'production'){
					this.production.push(obj)
				}else{
					this.process.push(obj)
				}
			},
			deleteClick(type,index){
				if(type == 'shipments'){
					this.shipments.splice(index,1)
				}else if(type == 'production'){
					this.production.splice(index,1)
				}else{
					this.process.splice(index,1)
				}
			},
			planConvertTo(type,data){ // 数组转字符串
				let string = ''
				data.forEach(item=>{
					let value = item.date + ',' + item.quantity + ';'
					string += value
				})
				if(type == 'shipments'){
					this.form.shippingSchedule = string
				}else if(type == 'production'){
					this.form.productionPlan = string
				}else{
					this.form.keyProcessProductionPlan = string
				}
			},
			convertToPlan(type, planData){ // 字符串转数组
				let data = planData.split(';')
				let arr = []
				for (let i = 0; i < data.length -1; i++) {
					let obj = {}
					obj.id = Math.round(Math.random()*10000)
					obj.date = data[i].split(',')[0]
					obj.quantity = data[i].split(',')[1]
					arr.push(obj)
				}
				if(type == 'shipments'){
					this.shipments = arr
				}else if(type == 'production'){
					this.production = arr
				}else{
					this.process = arr
				}
			},
			confirmPlan(){  // 计划录入保存
				if(this.popUpType == 'view'){
					return
				}
				if(this.shipments){
					this.planConvertTo('shipments',this.shipments)
				}
				if(this.production){
					this.planConvertTo('production',this.production)
				}
				if(this.process){
					this.planConvertTo('process',this.process)
				}
				let id = this.salesData.purchaseId + this.materialData.materialId
				this.form.id = id
				this.form.purchaseId = this.salesData.purchaseId
				this.form.materialId = this.materialData.materialId
				if(!this.isRedact){ // 新增计划录入
					api.addMaterialPlanEntry(this.form).then(res=>{
						if(res.code == 0){
							this.enteringAmendState()
						}
					})
				}else{ // 编辑计划录入
					api.updateMaterialPlanEntry(this.form).then(res=>{
						if(res.code == 0){
							this.isRedact = false
							this.enteringAmendState()
						}
					})
				}
			},
			enteringAmendState(){ // 计划录入-修改状态
				let that = this
				let data = {
					id: that.materialData.id,
					buttonLogo: "1",
					buttonLogoTo: "1"
				}
				api.updateSalesOrderMaterialById(data).then(res=>{
					if(res.code == 0){
						uni.showModal({
							content: '是否同步给客户？',
							success: function (res) {
								if (res.confirm) {
									that.synchronization()
								} else if (res.cancel) {
									that.closePopUp()
									that.anewRequest()
								}
							}
						});
					}
				})
			},
			synchronization(){ // 计划录入-同步客户
				let id = this.salesData.purchaseId + this.materialData.materialId
				let data = {
					id,
					buyerCompanyId:this.salesData.buyerCompanyId,
				}
				api.shoppingListScheduleSync(data).then(res=>{
					this.closePopUp()
					this.anewRequest()
				})
			},
			redactPlan(){
				this.$emit('compile')
				this.isRedact = true
			},
			cancelRedact(){
				this.$emit('cancelCompile')
				this.isRedact = false
			},
			deletePlan(){ // 删除计划录入
				let id = this.salesData.purchaseId + this.materialData.materialId + '/' + this.salesData.buyerCompanyId
				api.shoppingListDelete(id).then(res=>{
					if(res.code == 0){
						this.deleteAmendState()
					}
				})
			},
			deleteAmendState(){  // 删除计划录入-修改状态
				let data = {
					id: this.materialData.id,
					buttonLogo: "0",
					buttonLogoTo: "0"
				}
				api.updateSalesOrderMaterialById(data).then(res=>{
					if(res.code == 0){
						this.shipments = []
						this.production = []
						this.process = []
						this.form = {}
						this.closePopUp()
						this.anewRequest()
					}
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.share {
		width: 100%;
		height: 100%;
		background: #000000;
		position: relative;
		z-index: 200;
		.box {  // 遮罩
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0rpx;
			left: 0rpx;
			bottom: 0rpx;
			right: 0rpx;
			background-color: rgba(0, 0, 0, 0.7);
			transition: .3s;
			z-index: 999;
		}
		.show {
			transition: all 0.3s ease;
			transform: translateY(0%) !important;
		}
		
		// 离开分享动画
		.pop-upWindow {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			background-color: #fff;
			transition: all 0.3s ease;
			transform: translateY(100%);
			z-index: 1999;
			height: 90%;
			border-top-left-radius: 15px;
			border-top-right-radius: 15px;
		}
		.popoverHead{
			padding: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100rpx;
			padding: 0 40rpx;
			border-bottom: 1px solid #eeeeee;
			&-title{
				font-size: 36rpx;
				font-weight: 700;
			}
			&-icon{
				position: absolute;
				right: 0;
				display: flex;
				align-items: center;
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 40rpx;
				}
				text{
					margin-right: 40rpx;
				}
			}
		}
		.content{
			padding: 0 20rpx 180rpx 20rpx;
			&-Btn{
				position: fixed;
				left: 0;
				bottom: 20rpx;
				width: 100%;
				&-cancel,&-confirm{
					padding: 15rpx 0;
					color: #000;
					border-radius: 10rpx;
					background-color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				&-confirm{
					margin: 0 20rpx;
					padding: 20rpx 0;
					color: #fff;
					background-color: #409eff;
				}
			}
			.forbidden{
				background-color: #eee;
				border: 1rpx solid #eee;
			}
			&-inputInfo{
				border-bottom: 2rpx solid #f3f3f3;
				padding-bottom: 25rpx;
				&-top,&-bottom{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					&-item{
						width: 45%;
					}
				}
				&-top{
					margin: 30rpx 0;
				}
				input{
					height: 68rpx;
					display: flex;
					align-items: center;
					padding-left: 15rpx;
					border: 1rpx solid #00aaff;
					border-radius: 10rpx;
				}
			}
		
			&-shipmentsPlan{
				margin-top: 20rpx;
				&-title{
					font-weight: 700;
				}
				&-timeNum{
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-around;
					image{
						width: 30rpx;
						height: 30rpx;
					}
					&-time{
						width: 45%;
						border: 1rpx solid #00aaff;
					    display: flex;
					    justify-content: center;
					    padding: 20rpx 0;
					    border-radius: 12rpx;
					}
					&-num{
						width: 45%;
						display: flex;
						align-items: center;
						margin: 0 40rpx;
						input{
							width: 70%;
							border: 1rpx solid #00aaff;
							padding: 20rpx 0;
							border-radius: 12rpx;
							text-align: center;
						}
						image{
							margin-left: 25rpx;
							width: 60rpx;
							height: 60rpx;
						}
					}
				}
			
				&-add{
					display: flex;
					align-items: center;
					margin: 20rpx 0;
					&-title{
						width: 50%;
						font-weight: 700;
						color: #158fec;
					}
				}
			}
		
			
		}
	}

</style>
